<template>
    <MesBox v-model="model" :lazy="true" title="选择数据" :height="700" :width="1500" :padding="15">
        <!-- 设置查询条件 -->
        <div style="padding-bottom: 10px">
            <span style="margin-right: 20px">工序编码</span>
            <el-input placeholder="请输入工序编码" style="width: 200px" v-model="processCode" />
            <el-button type="primary" style="margin-left:10px" size="medium" icon="el-icon-zoom-out"
                @click="search">搜索</el-button>
        </div>

        <!-- mes-table配置的这些属性见MesTable组件api文件 -->
        <mes-table ref="mytable" :loadKey="true" :columns="columns" :pagination="pagination" :pagination-hide="false"
            :max-height="700" :url="url" :index="true" :single="true" :defaultLoadPage="defaultLoadPage"
            @loadBefore="loadTableBefore" @loadAfter="loadTableAfter"></mes-table>
        <!-- 设置弹出框的操作按钮 -->
        <template #footer>
            <div>
                <el-button size="mini" type="primary" @click="addRow()"><i class="el-icon-plus"></i>添加选择的数据</el-button>
                <el-button size="mini" @click="model = false"><i class="el-icon-close"></i>关闭</el-button>
            </div>
        </template>
    </MesBox>
</template>
<script>
import MesBox from "@/components/basic/MesBox.vue";
import MesTable from "@/components/basic/MesTable.vue";
import { thisTypeAnnotation } from "@babel/types";
export default {
    components: {
        MesBox: MesBox,
        MesTable: MesTable,
    },
    data() {
        return {
            model: false,
            defaultLoadPage: false, //第一次打开时不加载table数据，openDemo手动调用查询table数据
            productCode: "", //查询条件字段
            modelType: "",
            url: "api/Basicdata_Process/GetPageData",//加载数据的接口
            columns: [
                { field: 'Process_Id', title: '工序主键ID', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
                { field: 'ProcessCode', title: '工序编号', type: 'string', sort: true, width: 180, align: 'left', sort: true },
                { field: 'ProcessName', title: '工序名称', type: 'string', link: true, sort: true, width: 180, require: true, align: 'left' },
                { field: 'SubmitWorkLimit', title: '报工权限', type: 'string', bind: { key: 'usersWithAll', data: [] }, width: 220, require: true, align: 'left' },
                { field: 'SubmitWorkMatch', title: '报工数配比', type: 'decimal', width: 110, require: true, align: 'left' },
                { field: 'DefectItem', title: '不良品项列表', type: 'string', bind: { key: 'DefectItem', data: [] }, width: 220, require: true, align: 'left' },
                { field: 'CreateDate', title: '创建时间', type: 'datetime', sort: true, width: 110, align: 'left', sort: true },
                { field: 'CreateID', title: '创建人编号', type: 'int', width: 80, hidden: true, align: 'left' },
                { field: 'Creator', title: '创建人', type: 'string', width: 130, align: 'left' },
                { field: 'Modifier', title: '修改人', type: 'string', width: 130, align: 'left' },
                { field: 'ModifyDate', title: '修改时间', type: 'datetime', width: 110, align: 'left', sort: true },
                { field: 'ModifyID', title: '修改人编号', type: 'int', width: 80, hidden: true, align: 'left' }
            ],
            pagination: {}, //分页配置，见mestable组件api
        };
    },
    methods: {
        open() {
            this.model = true;
            //打开弹出框时，加载table数据
            this.$nextTick(() => {
                this.$refs.mytable.load();
            });
        },
        search() {
            //点击搜索
            this.$refs.mytable.load();
        },
        getFieldDicValue(fieldName, fieldValue) {
            this.columns.forEach(item => {
                if (item.field == fieldName) {
                    var result = item.bind.data.find(val => val.key == fieldValue)
                    return result;
                }
            })
        },
        addRow() {
            var rows = this.$refs.mytable.getSelected();
            if (!rows || rows.length == 0) {
                return this.$message.error("请选择行数据");
            }
            //回写数据到表单
            this.$emit("parentCall", ($parent) => {
                $parent.getrowprocess(rows); // 修正为工序数据处理方法
            });
            //关闭当前窗口
            this.model = false;
        },
        //这里是从api查询后返回数据的方法
        loadTableAfter(row) { },
        loadTableBefore(params) {
            //查询前，设置查询条件
            if (this.ProcessCode) {
                params.wheres = [{ name: "ProcessCode", value: this.ProcessCode }];
            }
            return true;
        },
    },
};
</script>